<template>
	<view class="my_container">
		<view class="mail_two">
			<view class="mail_text" style="font-weight: 700;">
				我的
			</view>
		</view>
		<view style="height: 214rpx;" @click="pleaseLogin">
			<view class="topBox">
				<view class="topBox_left">
					<view class="">
						<view class="name">
							<text>{{order.userName}}</text>
						</view>
						<view class="telephone" v-if="order">
							{{order.phonenumber}}
						</view>
						<view class="telephone" v-if="!order">
							请登录
						</view>
					</view>
					<view class="address">
						<view class="">
							<image src="../../static/workOrder/Group1270.png" mode=""
								style="width: 20rpx;height: 20rpx;"></image><text
								style="margin-left: 10rpx;">{{order.deptName}}</text>
						</view>
						<view class="" style="width: 126%;margin-top: 10rpx;">
							<image src="../../static/workOrder/Vector.png" mode="" style="width: 20rpx;height: 20rpx;">
							</image><text style="margin-left: 10rpx;">{{order.email}}</text>
							<image src="../../static/workOrder/Union.png" mode=""
								style="width: 20rpx;height: 20rpx;margin-left: 60rpx;"></image><text
								style="margin-left: 10rpx;">{{order.nickName}}</text>
						</view>
					</view>
				</view>
				<view class="topBox_right" style="margin: 50rpx auto;" v-if="order">
					<image :src="order.avatar" mode="" @click="personalInformation" style="border-radius: 50%;"></image>
				</view>
			</view>
		</view>
		<view class="grey">
			<image src="../../static/workOrder/image48.png" mode="" style="width: 100%;height: 100%;"></image>
			<view class="sign">
				签
			</view>
		</view>
		<view class="second_card">
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; margin: 20rpx 48rpx 16rpx 48rpx;"
				@click="assets">
				<view class="" style="display: flex;    height: 56rpx;">
					<view style="margin-top: 10rpx; text-align: center; line-height: 70rpx;">
						<image src="../../static/workOrder/Group1278.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
					</view> <text style="margin-left: 20rpx; line-height: 68rpx;">个人资产</text>
				</view>
				<view style="line-height: 70rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; margin: 20rpx 48rpx 16rpx 48rpx;"
				@click="record">
				<view class="" style="display: flex;    height: 56rpx;">
					<view style="margin-top: 10rpx; text-align: center; line-height: 70rpx;">
						<image src="../../static/workOrder/Group1277.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
					</view> <text style="margin-left: 20rpx; line-height: 68rpx;">缴费记录</text>
				</view>
				<view style="line-height: 70rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; margin: 20rpx 48rpx 16rpx 48rpx;"
				@click="faceEntry">
				<view class="" style="display: flex;    height: 56rpx;">
					<view style="margin-top: 10rpx; text-align: center; line-height: 70rpx;">
						<image src="../../static/workOrder/Group1276.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
					</view> <text style="margin-left: 20rpx; line-height: 68rpx;">人脸录入</text>
				</view>
				<view style="line-height: 70rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; margin: 20rpx 48rpx 16rpx 48rpx;"
				@click="drivingPayment">
				<view class="" style="display: flex;    height: 56rpx;">
					<view style="margin-top: 10rpx; margin-left: -4rpx; text-align: center; line-height: 70rpx;">
						<image src="../../static/workOrder/Parking.png" style="width: 47rpx; height: 47rpx;" mode="">
						</image>
					</view> <text style="margin-left: 19rpx; line-height: 68rpx;">行车缴费</text>
				</view>
				<view style="line-height: 70rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; margin: 20rpx 48rpx 16rpx 48rpx;"
				@click="salary">
				<view class="" style="display: flex;    height: 56rpx;">
					<view style="margin-top: 10rpx; text-align: center; line-height: 70rpx;">
						<image src="../../static/workOrder/Group1275.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
					</view> <text style="margin-left: 20rpx; line-height: 68rpx;">薪资查询</text>
					<!-- <web-view src="112.123.228.65:8084"></web-view> -->
				</view>
				<view style="line-height: 70rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; margin: 20rpx 48rpx 16rpx 48rpx;" @click="setUp">
				<view class="" style="display: flex;    height: 56rpx;">
					<view style="margin-top: 10rpx; text-align: center; line-height: 70rpx;">
						<image src="../../static/workOrder/Group832.png" style="width: 40rpx; height: 40rpx;" mode="">
						</image>
					</view> <text style="margin-left: 20rpx; line-height: 68rpx;">设置</text>
				</view>
				<view style="line-height: 70rpx;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
		<!-- 提示去登录 -->
		<u-modal v-model="show" show-cancel-button="true" cancel-color="#2979ff" :content="content" @confirm="confirm">
		</u-modal>
		<!-- template部分，u-tabBar放在页面展现最后 -->
		<!-- <u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-colot="inactiveColor"></u-tabbar> -->
		<!-- tabBar -->
		<tabBar ref="stock"></tabBar>
	</view>
</template>

<!-- js部分 -->
<script>
	// import tabBar from '../../store/modules/tabBar.js';
	import tabBar from "@/components/tabBar/tabBar.vue"
	// import {
	// 	mapGetters
	// } from 'vuex'
	export default {
		components:{
			tabBar
		},
		data() {
			return {
				// 模态框参数
				show: false,
				// 模态框参数
				content: '当前未登录，是否去登录',
				activeColor: "#55a0ff", // 选中时的颜色
				inactiveColor: "#000", // 未选中时的颜色
				// user_type: '',
				loginId: '',
				order: '',
				// 车牌号
				plantNo: '',
				// tabBarList:''
				flag:''
			}
		},
		computed: {
			// ...mapGetters([
			// 	'tabBarList', // 获取展示的tabBar列表
			// ])
		},
		// onLoad() {
		// },
		onShow() {
			// tabBar.base()
			// this.tabBarList=list
			this.plantNo = uni.getStorageSync("plantNo")
			this.order = uni.getStorageSync("setModel")
			this.loginId = uni.getStorageSync("userType")
			this.$refs.stock.getData()
			// this.flag = true
			// console.log('onShow')
		},
		// onHide() {
		// 	this.flag = false
		// 	// console.log('onHide')
		// },
		methods: {
			// 个人信息
			personalInformation() {
				this.openUrl('/pagesB/my/personalInformation/personalInformation')
			},
			// 点击确认按钮时触发
			confirm() {
				this.openUrl('/pagesB/sign/sign')
			},
			pleaseLogin() {
				if (this.loginId == '') {
					this.show = true
				}
			},
			// 个人资产
			assets() {
				if (this.loginId == '') {
					this.show = true
				} else {
					this.openUrl('/pagesB/my/personalAssets/personalAssets')
				}
			},
			// 缴费记录
			record() {
				if (this.loginId == '') { 
					this.show = true
				} else {
					this.openUrl('/pagesB/my/paymentRecord/paymentRecord')
				}
			},
			// 人脸录入
			faceEntry() {
				if (this.loginId == '') {
					this.show = true
				} else {
					this.openUrl('/pagesB/my/faceEntry/faceEntry')
				}
			},
			// 行车缴费
			drivingPayment() {
				if (this.loginId == '') {
					this.show = true
				} else if(this.plantNo == '') {
					this.$refs.uToast.show({
						title: '无车辆信息',
					})
				} else {
					this.openUrl('/pagesB/my/drivingPayment/drivingPayment')
				}
			},
			// 薪资查询
			salary() {
				// console.log('111111111')
				// this.$http.get('page',{}).then(res => {
				// 	// this.particulars=res.data
				// 	// this.form.Induction=res.data.createTime
				// 	console.log(res, '管理员待审核详情')
				// 	// this.owners = res.data
				// })
				if (this.loginId == '') {
					this.show = true
				} else {
					this.openUrl('/pagesB/my/salaryQuery/salaryQuery')
				}
			},
			// 设置
			setUp() {
				if (this.loginId == '') {
					this.show = true
				} else {
					this.openUrl('/pagesB/my/setUp/setUp')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_container {
		.mail_two {
			overflow: hidden;
			width: 100%;
			height: 330rpx;
			background: linear-gradient(-99.24deg, #57E1FF 0%, #75F7FF 20%, #0D92FF 100%);

			.mail_text {
				margin-left: 50rpx;
				margin-top: 96rpx;
				color: #fff;
				font-size: 40rpx;
			}
		}

		.topBox {
			display: flex;
			position: absolute;
			top: 190rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 90%;
			height: 330rpx;
			border-radius: 18rpx;
			background-color: #ffffff;
			box-shadow: 0 0 10rpx 5rpx #ccc;

			.topBox_left {
				.name {
					margin: 60rpx 0 20rpx 36rpx;
					font-size: 40rpx;
					font-weight: 700;
				}

				.telephone {
					margin-left: 36rpx;
				}

				.address {
					margin: 50rpx 0 0 36rpx;
				}
			}

			.topBox_right {
				image {
					width: 130rpx;
					height: 130rpx;
				}
			}
		}

		.grey {
			position: relative;
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			// background-color: #f2f2f2;

			.sign {
				position: absolute;
				top: 50%;
				right: -44rpx;
				transform: translateY(-50%);
				width: 110rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 50rpx;
				color: #53A6F6;
				border-radius: 40rpx 0 0 40rpx;
				background-color: #ffffff;
				box-shadow: 0 10rpx 10rpx #ccc;
			}
		}

		/deep/.second_card {

			.uni-card {
				z-index: unset;
				margin: 24rpx 0;
			}

			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 22rpx 46rpx 14rpx 46rpx;
			}

			.uni-card__content {
				padding: 0 10rpx !important;
			}
		}

	}
</style>
